<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         body,
html,
div {
    padding: 0px;
    margin: 0px;
}

body {
    padding: 40px 80px;
}

#show_result,#show_course {
    width: 292px;
    height: 20px;
    border: 1px solid #000;
    border-bottom:none;
    font-size:20px;
    padding: 5px;
}
#show_result{
    border-bottom:1px solid #000;
    border-top:none;
    height:40px;
    text-align: right;
    font-size: 34px;
    font-weight: bold;
}

#num_area {
    width: 303px;
    font-size: 26px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    border-left: 1px solid #000;
    overflow: hidden;
}

#num_area div {
    width: 100px;
    height: 50px;
    float: left;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    cursor: pointer;
}
    </style>
</head>
<body>
    <div id="show_course"></div>
    <div id="show_result">0</div>
    <div id="num_area">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>0</div>
        <div>+</div>
        <div>-</div>
        <div>*</div>
        <div>/</div>
        <div>=</div>
        <div style="width:302px;">RESET</div>
    </div>
</body>
<script>
    //获取显示结果的div
var showResult = document.getElementById("show_result");
//获取显示过程的div
var showCourse = document.getElementById("show_course");
//获取所有的数字、运算符div
var divs = document.getElementById("num_area").getElementsByTagName("div");

//遍历div,给div添加点击事件
for (var i = 0; i < divs.length; i++) divs[i].onclick = clickHand;
//声明变量，数字1、数字2、运算符、bool用来控制给第几个数字赋值
var num1 = 0,
    num2 = "",
    symbol = "",
    value = "",
    bool = false,
    result = 0;
//点击事件
function clickHand() {
    //获取当前div的值
    value = this.innerHTML;
    //给第一个数字赋值
    if (!bool) {
        //判断是否为数字，如果是数字，就赋值给num1
        if (!isNaN(value)) {
            num1 += value;
            num1 = parseInt(num1);
            showResult.innerHTML = num1;
        } else {
            //将除了等号和reset之外的运算符赋值给symbol
            if (value !== "=" && value !== "RESET") {
                //bool用来控制给第一个数字赋值结束
                bool = true;
                symbol = value;
                value = "";}}
    }else{
        //给第二个数字赋值
        num2 += value;
        num2 = parseInt(num2);
        showResult.innerHTML = num2;}
    //当点击等号的时候，开始运算
    if (value === "=") {
        switch (symbol) {
            case "+":
                result = num1 + num2;
                break;
            case "-":
                result = num1 - num2;
                break;
            case "*":
                result = num1 * num2;
                break;
            case "/":
                result = num1 / num2;
                break;}
        //显示运算结果
        showResult.innerHTML = result;
        //运算完后，将变量值清空
        num1 = 0;num2 = "";symbol = "";value = "";bool = false;}
    //点击reset，将变量值清空
    if (value === "RESET") {
        num1 = 0;
        num2 = "";
        symbol = "";
        value = "";
        bool = false;
        showResult.innerHTML = "0";}
    //显示运算的过程
    showCourse.innerHTML=num1+symbol+num2;
     showResult.innerHTML =result.toFixed(4);}
     showResult.innerHTML =Number.parseFloat(result);
</script>
</html>